<template>

  <div class="all">
    <div class="head out_wrap">
      <div class="wrap_title">

        <div class="title">
          <div class="name">{{shoper.franchisee_name}}</div>
          <div class="phone">{{shoper.mobile}}</div>
        </div>
        <div class="right_span">
          <van-tag v-if="shoper.status == 1" type="success" class="p_10" size="large">{{shoper.status_text}}</van-tag>
          <van-tag v-if="shoper.status == 2" class="p_10" type="warning" size="large">{{shoper.status_text}}</van-tag>
        </div>
      </div>
      <van-row type="flex" justify="space-around">
        <van-col class="fill">
          <div class="sign_time">
            合约期: {{show_sign_time}}
          </div>
          <div class="info">

            <div>纳税识别号:{{shoper.tax_number}}</div>
            <div>银行卡号:{{reg_txt_code(shoper.bank_number)}}</div>
            <div>开户行:{{shoper.open_bank_name}}</div>
          </div>
        </van-col>
        <van-col span="7" class="fill space_evenly">
          <van-button @click="update">修改</van-button>
          <van-button v-hasRole="['manager']" @click="addMoney">充值</van-button>
          <van-button v-hasRole="['manager']" @click="show_verify = true">审核</van-button>
        </van-col>

      </van-row>

    </div>
    <div class="sign out_wrap">
      <div class="show_img">

        <upload :deletable="false" v-model="shoper.business_license" class="set_width_height" text="营业执照" />
        <upload :deletable="false" v-model="shoper.cooperation_images" class="set_width_height" text="合作协议" />
        <!-- <uploader v-model="user_data.cooperation_sn" class="set_width_height" text="合作协议" /> -->

      </div>
      <div class="upload_button">
        <div @click="download_business" class="orange_btn c_flex">营业执照
          <svg-icon class-name="icon_size" icon-class="download" />
        </div>
        <div @click="download_sign" class="orange_btn  c_flex">合作协议
          <svg-icon class-name="icon_size" icon-class="download" />
        </div>
      </div>

    </div>
    <div class="car out_wrap">
      <div class="car_icon">
        <van-row>
          <van-col>
            <svg-icon class-name="icon_size" icon-class="car" />
          </van-col>
          <van-col>
            <span class="car_title ">加盟车</span>
          </van-col>
        </van-row>


      </div>

      <div v-if="!_.isEmpty(cars)" class="c_flex car_list">
        <div v-for="(car_item,index) in cars" class="car_show" :key="index">
          <div class="car_num c_flex">
            <div @click="showCar(car_item.id)" class="recommend-icon">
              <i class="recommend-container"></i>
              <span>营收</span>
            </div>
            加盟车:{{car_item.full_plate}}
          </div>
          <div class="wrap_money">
            <div class="color1 yesterday">
              <div class="y_title">
                昨日营收
              </div>
              <div>
                {{car_item.last_sale_log}}元
              </div>
            </div>
            <div class="color2 yesterday">
              <div class="y_title">
                累计营收
              </div>
              <div>
                {{car_item.sum_sale_amount}}元
              </div>
            </div>
          </div>
          <van-divider :style="{borderWidth:'0.5px'}" />
        </div>
        <div class="other_car" @click="add_car">
          <van-button class="set"> 增加加盟车 </van-button>
        </div>
      </div>
      <div v-else @click="add_car" class="add_car c_flex">
        绑定加盟车
      </div>
    </div>
    <outsky :type="type" :shoper="shoper" :show_add.sync="show_add" />
    <add_car :show_add.sync="show_car" :shoper_id="$route.query.shoper_id" />
    <add_money :show_add.sync="show_money"  :car_id="car_id"/>
    <check :show_add.sync="show_verify" :shoper="shoper" :shoper_id="$route.query.shoper_id" />
  </div>
</template>

<script>
  import outsky from '@/views/home/component/form/out_sky.vue'
  import upload from '@/components/Upload'
  
  import add_car from './add_car.vue'
  import add_money from './add_money.vue'
  import check from './check.vue'
 
  import {
    ShoperService
  } from '@/api'
  export default {

    components: {
      upload,
      add_car,
      outsky,
      check,
      add_money,
    },
    data() {
      return {
        show_add: false,
        show_money: false,
        show_car: false,
        show_verify: false,
        cars: [],
        files1: [],
        files2: [],
        type: 'add',
        shoper: {},
        car_id: '',
      }
    },
    mounted() {
      this.$EventBus.$on("update_one", () => {
        this.getShoper();
      })
      this.getShoper();
    },
    computed: {
      show_sign_time() {
        return `(` + this.shoper.cooperation_start_date +
          `~` + this.shoper.cooperation_end_date + `)`
      }
    },
    methods: {
      back(){
        console.log(11)
      },
      handle_time(value) {
        return value ?.split(' ')[0] ? value ?.split(' ')[0] : '无时间'
      },
      download_business() {
        this.aDownlad(this.shoper.business_license, "营业执照")
      },

      download_sign() {
        this.shoper.last_cooperation_attachments.forEach(function (item, index) {
          this.aDownlad(item, "合同协议-" + (index + 1));
        })
      },
      async aDownlad(Url, fileName) {
        var oA = document.createElement("a");
        oA.download = fileName; // 设置下载的文件名，默认是’下载’
        oA.href = Url;
        document.body.appendChild(oA);
        oA.click();
        oA.remove(); // 下载之后把创建的元素删除

      },
      getShoper() {
        ShoperService.getOne({
          relation: 'cars,cooperations,cooperations.attachments'
        }, this.$route.query.shoper_id).then(res => {
          this.shoper = this.handleData(res.data);
          this.cars = res.data.cars;
        })
      },
      reg_txt_code(val) {
        val = String(val)
        // let cc = val.replace(/(?<=\b(\d{4})+)(\d)/g, ' $2')
        return val
      },
      handleData(data) {
        return {
          franchisee_name: data.franchisee_name,
          corporate: data.corporate,
          tax_number: data.tax_number,
          mobile: data.mobile,
          region_id: data.region_id,
          open_bank_name: data.open_bank_name,
          bank: data.bank_name,
          bank_number: data.bank_number,
          cooperation_start_date: data.cooperation_start_date,
          cooperation_end_date: data.cooperation_end_date,
          last_cooperation_years: data.last_cooperation_years,
          sign_time: data.sign_date_text,
          cooperation_years: "" + data.last_cooperation_years,
          cooperation_sn: data.cooperation_sn,
          cooperation_images: data.cooperation_images,
          business_license: data.business_license,
          id: data.id,
          bond: data.bond,
          franchisee_fee: data.franchisee_fee,
          management_fee: data.management_fee,
          status: ""+ data.status,
          id_card_back: data.id_card_back,
          id_card_front: data.id_card_front,
          status_text: data.status_text,
          last_cooperation_attachments: data.last_cooperation_attachments,
          all_region_text: data.all_region_text,
          sign_date: data.sign_date,
        }
      },
      add_car() {
        this.show_car = true;
      },
      update() {
        this.show_add = true;
        this.type = 'update';
      },
      addMoney() {
        this.$router.push({
          path: "/financial",
          query: {
            shoper_id: this.$route.query.shoper_id,
            shoper_name: this.shoper.franchisee_name
          }
        });
      },
      showCar(id){
        this.car_id = id;
        this.show_money = true;
      },
      afterRead(file) {
        // 此时可以自行将文件上传至服务器
        console.log(file);
      },
    },
  }
</script>

<style lang="less" scoped>
  .all {
    padding: 24px 0;
    background-color: #f3f5f7;
    height: 100%;
    .head {
      width: 702px;
      height: 352px;
      padding: 0 32px;


      .wrap_title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        height: 110px;
        border-bottom: 1px solid rgba(134, 134, 134, 1);

        .title {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;

          .name {
            height: 41px;
            color: rgba(51, 51, 51, 1);
            font-size: 28px;
            line-height: 41px;
          }

          .phone {
            height: 24px;
            color: rgba(102, 102, 102, 1);
            font-size: 16px;
          }
        }

        .right_span {}
      }

      .space_evenly {
        justify-content: space-evenly;
      }

      .fill {
        height: 240px;
        display: flex;
        flex-direction: column;

        .sign_time {
          margin-top: 47.7px;
          color: rgba(153, 153, 153, 1);
          font-size: 16px;
        }

        .info {
          margin: 18.39px 0 10px 0;
          color: rgba(51, 51, 51, 1);
          font-size: 20px;

          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
        }
      }
    }

    .sign {
      width: 702px;
      height: 446px;
      display: flex;
      flex-direction: column;

      .show_img {
        margin-top: 20px;
        height: 75%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        .set_width_height {
          width: 240px;
          height: 280px;
        }

      }

      .upload_button {
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        .orange_btn {
          width: 160px;
          height: 60px;
          background-color: rgba(242, 147, 33, 1);
          border-radius: 16px;
          color: #fff;
          font-size: 20px;

          .icon_size {
            width: 20px;
            height: 20px;
            margin-left: 9px;
          }
        }
      }

    }

    .car {
      width: 702px;
      padding-bottom: 30px;

      .car_list {
        display: flex;
        flex-direction: column;

        .car_show {
          margin-bottom: 10px;

          .car_num {
            .recommend-icon {
              position: absolute;
              right: -65px;
              top: -35px;
              transform: rotateZ(45deg);

              .recommend-container {
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0 50px 50px 50px;
                border-color: transparent transparent #20C05C transparent;
              }

              span {
                position: absolute;
                top: 65px;
                right: 20px;
                display: inline-block;
                font-size: 16px;
                width: 50px;
                color: #FFF;
              }
            }

            width: 592px;
            height: 120px;
            background-color: rgba(233, 244, 233, 1);
            border-radius: 16px;
            font-size: 36px;
            color: black;
            margin-bottom:15px;
            position: relative;
          }

          .wrap_money {
            display: flex;
            justify-content: space-between;

            .yesterday {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;

              width: 280px;
              height: 120px;

              border-radius: 16px;

              .y_title {
                align-self: flex-start;
                margin-bottom: 15px;
                font-size: 16px;
                padding-left: 10px;
              }
            }

            .color1 {
              background-color: rgba(246, 225, 216, 1);
            }

            .color2 {
              background-color: rgba(211, 197, 180, 1);
            }
          }

          padding-bottom: 15px;
        }

        .other_car {
          .set {
            padding: 10px 20px;
          }

          padding: 10px 0;
        }
      }

      .car_icon {
        height: 100px;

        padding: 30px 0 0 30px;

        .car_title {
          margin-left: 20px;
          color: rgba(51, 51, 51, 1);
          font-size: 24px;
        }

        .icon_size {
          width: 26px;
          height: 26px;
          margin-left: 9px;
        }
      }

      .add_car {
        margin: 0 auto;
        width: 592px;
        height: 120px;
        background-color: rgba(243, 245, 247, 1);
        border-radius: 16px;
      }
    }
  }
</style>